<template>
  <div class="container">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="排列三一号表" name="first">
        <el-container class="box">
          <el-aside width="140px">手工筛选后的数</el-aside>
          <el-container>
            <el-header height="50px">7.手工筛选后的数</el-header>
            <el-main>
              <ul>
                <li v-for="(item,index) in list" :key="index">
                  <div>{{item}}</div>
                </li>
              </ul>
            </el-main>
          </el-container>
        </el-container>

        <!-- 底部按钮 -->
        <div class="bottom">
          <el-button type="primary" @click="goBack">上一步</el-button>
          <!-- 导出表格 -->
          <download-excel class="export-excel-wrapper" :data="json_data" :fields="json_fields" name="排列三号码数据导出.xlsx">
            <el-button type="primary">导出表格</el-button>
          </download-excel>
        </div>
      </el-tab-pane>

      <el-tab-pane label="排列三二号表" name="second">
        <el-container class="box">
          <el-aside width="140px">手工筛选后的数</el-aside>
          <el-container>
            <el-header height="50px">7.手工筛选后的数</el-header>
            <el-main>
              <ul>
                <li v-for="(item,index) in list" :key="index">
                  <div>{{item}}</div>
                </li>
              </ul>
            </el-main>
          </el-container>
        </el-container>

        <!-- 底部按钮 -->
        <div class="bottom">
          <el-button type="primary" @click="goBack">上一步</el-button>
          <!-- 导出表格 -->
          <download-excel class="export-excel-wrapper" :data="json_data" :fields="json_fields" name="排列三号码数据导出.xlsx">
            <el-button type="primary">导出表格</el-button>
          </download-excel>
        </div>

      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
  export default {
    name: 'Home',
    data() {
      return {
        activeName: 'first',
        type:0,
        list: [], // 显示的号码数据
        json_fields: { // 显示导出的标头
          "号码": "number",
        },
        json_data: [] // 显示导出的号码
      };
    },

    created() {
      var activeName = this.$route.query.activeName;
      var type = this.$route.query.type;
      this.activeName = activeName;
      this.type = type;
      this.loadData();

    },

    methods: {
      handleClick(tab, event) {
        this.activeName = tab.name;
        this.loadData();
      },

      loadData(){
        
        if (this.activeName == 'first') {
          if (this.type == 1) {
            var dataJson = window.localStorage.getItem("selectdwjoForwardList");
            this.list = eval(dataJson);
          } else if (this.type == 2) {
            var dataJson = window.localStorage.getItem("selectdwjoMiddleList");
            this.list = eval(dataJson);
          } else {
            var dataJson = window.localStorage.getItem("selectdwjoList");
            this.list = eval(dataJson);
          }
        }else {
          if (this.type == 1) {
            var dataJson = window.localStorage.getItem("selectdwjoForwardList2");
            this.list = eval(dataJson);
          } else if (this.type == 2) {
            var dataJson = window.localStorage.getItem("selectdwjoMiddleList2");
            this.list = eval(dataJson);
          } else {
            var dataJson = window.localStorage.getItem("selectdwjoList2");
            this.list = eval(dataJson);
          }
        
        }
       

        if (this.list.length > 0) {
          for (var index in this.list) {
            this.json_data.push({
              "number": this.list[index]
            });
          }
          console.log(this.json_data)
        }

      },

      // 返回上一页
      goBack() {
        this.$router.back();
      },

    },

  }
</script>

<style scoped="scoped">
  .box {
    border: 1px solid #2676C2;
  }

  .el-header {
    background-color: #FFFFFF;
    color: #333;
    line-height: 50px;
    border-bottom-style: solid;
    border-color: #2676C2;
    border-width: 1px;
  }

  .el-aside {
    background-color: #FFFFFF;
    color: #2676C2;
    text-align: center;
    line-height: 200px;
    border-right-style: solid;
    border-color: #2676C2;
    border-width: 1px;
  }

  .el-main {
    background-color: #FFFFFF;
    color: #333;
    text-align: center;
    padding: 0;
    margin: 0;
  }

  ul {
    overflow: hidden;
    padding: 0;
    margin: 10px 10px;
    /* background-color: red; */
  }

  li {
    list-style: none;
    float: left;
    width: 60px;
    /*可以用百分比*/
    height: 20px;
    /*可以用百分比*/
    margin-bottom: 10px;
    /* border: 1px solid red; */
  }

  li>div {
    background: #eee;
    margin: 0 10px;
    border-radius: 4px;
    text-align: center;
    line-height: 20px;
    color: #2676C2;
    border: 1px solid #999999;

  }

  .export-excel-wrapper {
    margin-left: 20px;
  }

</style>
